<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="./css/map_demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=bff9c1086f584564864465f303b48bcb"></script>
    <!-- <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> -->
    <script src="./js/map-demoutils.js"></script>

    <script>
        var map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
            zoom:11, // 初始化地图层级
            center: [116.397428, 39.90923] // 初始化地图中心点
        });

        map.on("complete", function(){
            console.info("地图加载完成！");
            // log.success("地图加载完成！");  
        });

        // 接收来自Cocos Creator的消息
        window.addEventListener('message', function(event) {
            var data = event.data;
            if (data.action === 'setCenter') {
                var center = data.params;
                map.setCenter(new AMap.LngLat(center.lng, center.lat));
            }
        });

        // 发送消息到Cocos Creator
        function sendMessageToCocos(data) {
            if (window.parent && window.parent.postMessage) {
                window.parent.postMessage(data, '*');
            }
        }

        // 示例：地图点击事件发送消息到Cocos Creator
        map.on('click', function(e) {
            sendMessageToCocos({
                action: 'mapClick',
                params: {
                    lng: e.lnglat.getLng(),
                    lat: e.lnglat.getLat()
                }
            });
        });

    </script>

</body>
</html>